<template>
  <Card :title="title" v-bind="$attrs">
    <template #extra>
      <!-- <a-button type="link" size="small" @click="addClass">添加班级</a-button> -->
      <!-- <a-button type="link" size="small" color="error">删除班级</a-button> -->
    </template>
    <CardGrid
      v-for="item in list"
      :key="item"
      class="!md:w-1/3 !w-full"
      @click="goClassDetails(item)"
    >
      <span class="flex">
        <Icon icon="ant-design:trophy-filled" :color="item.color" size="30" />
        <span class="text-lg ml-4">{{ item.name }}</span>
      </span>
      <div class="flex mt-2 h-10 text-secondary">电子与信息工程学院</div>
      <div class="flex justify-between text-secondary">
        <!-- <span>{{ item.desc }}</span> -->
        <span>{{ item.desc }}</span>
      </div>
    </CardGrid>
  </Card>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Card } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { useGo } from '/@/hooks/web/usePage';
  export default defineComponent({
    components: { Card, CardGrid: Card.Grid, Icon },
    props: {
      title: {
        type: String,
        default: '',
      },
      list: {
        type: Array,
        default: () => [],
      },
    },
    setup() {
      const go = useGo();
      const goClassDetails = (e) => {
        console.log('goClassDetails', e);
        go('/teacher/classdetails?id=' + e.id);
      };
      return { goClassDetails };
    },
  });
</script>
